<template>
    <div class="c-item">
        <div class="gif-box" @click="loadGif">
            <img :src="gif === 0 ? item.img : item.gif" alt="{{item.title}}"/>
            <div v-if="gif !== 2" :class="{'gif-loading': gif === 1}" class="gif-btn"></div>
            <div v-if="gif !== 2" class="gif-text"></div>
        </div>
        <a v-link="{name: 'detail', params: {id: item.id, cid: cid, tid: tid}}">
            <div class="info">
                <h3 v-if="item.title" class="r-title">{{item.title}}</h3>
                <span v-if="item.content" class="r-intro">{{item.content}}</span>
            </div>
        </a>
        <vote-view :aid="item.id" :up="item.good" :down="item.bad"></vote-view>
    </div>
</template>

<script>
    import VoteView from './../module/VoteView.vue'

    export default {
        name: 'GifItem',
        components:{
            VoteView
        },
        data (){
            return {
                gif: this.item.loadStatus || 0
            }
        },
        props: {
            item: Object,
            index: Number,
            cid: Number,
            tid: Number
        },
        methods: {
            loadGif: function (e) {
                if(this.gif === 0 && this.item.gif){
                    let img = new Image();
                    img.src = this.item.gif;
                    img.onload = function () {
                        this.gif = 2;
                        this.item.loadStatus = 2;
                        this.item.img = this.item.gif;
                    }.bind(this);
                    this.gif = 1;
                }
            }
        }
    }
</script>